<!Doctype html>
<html>
<script type="text/javascript" src="./jquery.js"></script>
<link style="text/css" src="./bootstrap.css"></link>
<script type="text/javascript" src="./bootstrap.js"></script>
<script type="text/javascript" src="./mustache.js"></script>

<body onload="loadUser()">
  <div id="target">Loading...</div>
  <script id="template" type="text/html">
    <!--title无法阻止转义  -->
    <h1 title="{{{name}}}">{{&name}}</h1>
    Hello {{name}}!<br/>
    Hello {{{name}}}!<br/>
    Hello {{&name}}!<br/>
    <!-- 默认所有的文本都会进行 HTML 转义。如果你想要在渲染的时候避免 HTML 转义，可以使用三层花括号：｛｛｛name｝｝｝。你也可以使用 & 符号避免变量转义。 -->
    <!-- Hello &lt;b&gt;Luke&lt;&#x2F;b&gt;!<br/>
    Hello <b>Luke</b>!<br/>
    Hello <b>Luke</b>!<br/> -->
  </script>

  <script>
    function loadUser() {
      var template = $('#template').html();
      Mustache.parse(template);
      // optional, speeds up future uses
      var rendered = Mustache.render(template, {
        name: "<b>Luke</b>"
      });
      console.info(rendered);
      $('#target').html(rendered);
    }
  </script>
</body>

</html>
